import React, { useState } from "react";
import { NavBar, Modal, Input, Toast, Image as MyImage, Button } from "antd-mobile";
import { useLocation, useNavigate } from "react-router-dom";
import { ReactComponent as WaitIcon } from '../../../asset/imgs/wait.svg';
import "./styles.scss";

const iconColor = getComputedStyle(document.documentElement)
  .getPropertyValue('--logoColor')
  .trim();

export default function Begin() {
  const [number, setNumber] = useState("");
  const [visible, setVisible] = useState(false);
  const location: any = useLocation();
  const navigate: any = useNavigate();
  const detail = location?.state?.detail;
  const { memberName, memberId, lineNum, memberFormulPhoto, customerId }: any =
    location?.state?.detail;

  const back = () => {
    window.history.go(-1);
  };

  const handleInput = (value: any) => {
    setNumber(value);
  };

  const handleSubmit = () => {
    if (!number) {
      Toast.show({ content: "请输入张数" });
      return;
    }
    navigate("/activity/scan", { state: { detail: { ...detail, number, from: 'online' } } });
    // navigate("/activity/timing", {
    //   state: { detail: { ...detail, number } },
    // });

    setVisible(false);
    setNumber("");
  };

  return (
    <div className="container_activity_choose">
      <div>
        <NavBar
          style={{
            "--border-bottom": "1px #eee solid",
          }}
          onBack={back}
        >
          活动详情
        </NavBar>
      </div>

      <div className="activity_public">
        <li className="that_item">
          <MyImage
            src={memberFormulPhoto}
            fit="cover"
            width="4rem"
            height="4rem"
            lazy={true}
          />
          <div className="item_content_wraper">
            <div className="name">{memberName}</div>
            <div className="queue">
              <div>
                <WaitIcon width={50} height={50} fill={iconColor}/>
                <div>排队人数：</div>
              </div>
              <div>{lineNum}</div>
            </div>
          </div>
        </li>
        <ul className="that_footer">
          <Button
            onClick={() => {
              navigate("/activity/scan", {
                state: { detail: { ...detail, number: 1, from: 'online', title: '核销券码' } },
              });
            }}
          >
            使用1张券
          </Button>
          <Button
            onClick={() => {
              navigate("/activity/scan", {
                state: { detail: { ...detail, number: 2, from: 'online' } },
              });
            }}
          >
            使用2张券
          </Button>
          <Button onClick={() => setVisible(true)}>自定义使用张数</Button>
        </ul>
      </div>

      <Modal
        visible={visible}
        showCloseButton={true}
        destroyOnClose={true}
        title="请输入核销券张数"
        content={
          <Input
            onChange={(value) => handleInput(value)}
            style={{ border: "1px solid #eee" }}
            type="tel"
          />
        }
        actions={[
          {
            key: "submit",
            text: "确定",
            primary: true,
            onClick: handleSubmit,
          },
        ]}
        onClose={() => {
          setVisible(false);
          setNumber("");
        }}
      />
    </div>
  );
}
